NetworkMenu: prefer wifi/3g over vpn in the panel

Wifi and mobile broadband have signal indicators and are thus
more useful than vpn icons in the panel. Therefore, in the case
we have both wifi/3g and VPN we prefer the former as the "primary
icon" and add a lock next to it.
Behavior when VPN is added to wired or other connections is still
preserved: the wired icon is replaced by vpn.

https://bugzilla.gnome.org/show_bug.cgi?id=672591

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 6f45cfffe163d081c687f9968b9ddbb2e216151d..d6cdc2091ee00769f2d3873a9a1843923b90cf0c 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -436,6 +436,10 @@ StScrollBar StButton#vhandle:hover
     -boxpointer-gap: 4px
 }
 
+#networkMenu {
+    spacing: 4px;
+}
+
 /* User Menu */
 
 #panelUserMenu {

diff --git a/js/ui/status/network.js b/js/ui/status/network.js
index f3a113bac73c95d557e40f37506e611e17adea6e..5a3210bfb9b55fd7c0b91b37f09d5ffe91405cdd 100644 (file)
--- a/js/ui/status/network.js
+++ b/js/ui/status/network.js
@@ -1567,10 +1567,25 @@ const NMDeviceWireless = new Lang.Class({
 
 const NMApplet = new Lang.Class({
     Name: 'NMApplet',
-    Extends: PanelMenu.SystemStatusButton,
+    Extends: PanelMenu.Button,
 
     _init: function() {
-        this.parent('network-offline', _("Network"));
+        this.parent(0.0, _('Network'));
+
+        this._box = new St.BoxLayout({ name: 'networkMenu' });
+        this.actor.add_actor (this._box);
+        this.actor.add_style_class_name('panel-status-button');
+
+        this._primaryIcon = new St.Icon({ icon_name: 'network-offline',
+                                          icon_type: St.IconType.SYMBOLIC,
+                                          style_class: 'system-status-icon' });
+        this._box.add_actor(this._primaryIcon);
+
+        this._secondaryIcon = new St.Icon({ icon_name: 'network-vpn',
+                                            icon_type: St.IconType.SYMBOLIC,
+                                            style_class: 'system-status-icon',
+                                            visible: false });
+        this._box.add_actor(this._secondaryIcon);
 
         this._client = NMClient.Client.new();
 
@@ -1588,6 +1603,7 @@ const NMApplet = new Lang.Class({
         this._connections = [ ];
 
         this._mainConnection = null;
+        this._vpnConnection = null;
         this._activeAccessPointUpdateId = 0;
         this._activeAccessPoint = null;
         this._mobileUpdateId = 0;
@@ -1678,6 +1694,10 @@ const NMApplet = new Lang.Class({
         }));
     },
 
+    setIcon: function(iconName) {
+        this._primaryIcon.icon_name = iconName;
+    },
+
     _ensureSource: function() {
         if (!this._source) {
             this._source = new MessageTray.Source(_("Network Manager"),
@@ -1851,6 +1871,8 @@ const NMApplet = new Lang.Class({
 
         this._activeConnections = newActiveConnections;
         this._mainConnection = null;
+        this._vpnConnection = null;
+
         let activating = null;
         let default_ip4 = null;
         let default_ip6 = null;
@@ -1884,10 +1906,10 @@ const NMApplet = new Lang.Class({
                 default_ip4 = a;
             if (a.default6)
                 default_ip6 = a;
+
             if (a._type == 'vpn')
                 active_vpn = a;
-
-            if (a.state == NetworkManager.ActiveConnectionState.ACTIVATING)
+            else if (a.state == NetworkManager.ActiveConnectionState.ACTIVATING)
                 activating = a;
 
             if (!a._primaryDevice) {
@@ -1916,7 +1938,8 @@ const NMApplet = new Lang.Class({
             }
         }
 
-        this._mainConnection = activating || active_vpn || default_ip4 || default_ip6 || this._activeConnections[0] || null;
+        this._mainConnection = activating || default_ip4 || default_ip6 || this._activeConnections[0] || null;
+        this._vpnConnection = active_vpn;
     },
 
     _notifyActivated: function(activeConnection) {
@@ -2062,9 +2085,6 @@ const NMApplet = new Lang.Class({
             case NMConnectionCategory.WIRED:
                 this.setIcon('network-wired-acquiring');
                 break;
-            case NMConnectionCategory.VPN:
-                this.setIcon('network-vpn-acquiring');
-                break;
             default:
                 // fallback to a generic connected icon
                 // (it could be a private connection of some other user)
@@ -2127,9 +2147,6 @@ const NMApplet = new Lang.Class({
                 this.setIcon('network-cellular-signal-' + signalToIcon(dev.mobileDevice.signal_quality));
                 hasMobileIcon = true;
                 break;
-            case NMConnectionCategory.VPN:
-                this.setIcon('network-vpn');
-                break;
             default:
                 // fallback to a generic connected icon
                 // (it could be a private connection of some other user)
@@ -2138,6 +2155,25 @@ const NMApplet = new Lang.Class({
             }
         }
 
+        // update VPN indicator
+        if (this._vpnConnection) {
+            let vpnIconName = 'network-vpn';
+            if (this._vpnConnection.state == NetworkManager.ActiveConnectionState.ACTIVATING)
+                vpnIconName = 'network-vpn-acquiring';
+
+            // only show a separate icon when we're using a wireless/3g connection
+            if (mc._section == NMConnectionCategory.WIRELESS || 
+                mc._section == NMConnectionCategory.WWAN) {
+                this._secondaryIcon.icon_name = vpnIconName;
+                this._secondaryIcon.visible = true;
+            } else {
+                this.setIcon(vpnIconName);
+                this._secondaryIcon.visible = false;
+            }
+        } else {
+            this._secondaryIcon.visible = false;
+        }
+
         // cleanup stale signal connections
 
         if (!hasApIcon && this._activeAccessPointUpdateId) {